<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<dom-module id="shop-product">
    <template>
        <style>
            :host{
                width: 100%;
                background-color: #fff;
                min-height: 1024px;
                display: block;
            }
            paper-tabs{
                --paper-tabs-selection-bar-color:#000;
                background-color: #eee;
            }
            paper-icon-item{
                border-bottom: #eee solid 1px;
            }
            paper-icon-item iron-image{
                width: 56px;
                height: 56px;
            }
            paper-icon-item paper-item-body{
                margin-left: 16px;
            }
            div[slot=item-icon]{
                width: 56px;
                height: 56px;
                background-color: #eee;
            }
            paper-listbox a{color: #333;}
            paper-listbox iron-icon{color: #999;}
            paper-input{
                background-color: #fff;
                --paper-font-subhead_-_font-size:13px;
                --paper-input-container-shared-input-style_-_font-size:13px;
                --paper-input-container-focus-color:#000;
            }
            .search{border-bottom: #eee solid 1px;padding: 16px;}
            #main{
                display: flex;
            }
            #list{
                width: 100%;
                margin-left: 80px;
                box-sizing: border-box;
            }
            #list paper-icon-item{
                padding-left:10px;
                border: #eee solid 1px;
                margin: 10px;
                margin-top: 0px;
            }
            #list paper-icon-item div[secondary]{
                font-size: 10px;
            }
            #nav{
                width: 80px;
                position: absolute;
                left: 0px;
                padding-left: 10px;
                box-sizing: border-box;
                z-index: 1;
            }
            #nav paper-item{
                font-size: 10px;
                text-align: center;
                padding: 0;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                opacity: 0.75;
            }
            #nav paper-item[aria-selected=true]{
                background-color: #000;
                color: #fff;
                opacity: 1;
            }
            #nav paper-item[focused]{
                background-color: #000;
                color: #fff;
            }
        </style>
        <app-route
        route="{{route}}"
        pattern="/:catid"
        data="{{routeData}}"></app-route>
        <iron-ajax id="xhr_categories" url="{{app.httpHost}}/plugin/api/product.category.list?app_id={{app.appId}}" last-response="{{categories}}"></iron-ajax>
        <iron-ajax id="xhr_list" url="{{app.httpHost}}/plugin/api/product.query?app_id={{app.appId}}&max={{max}}&start={{start}}" last-response="{{products}}" on-last-response-changed="_loadSuccess"></iron-ajax>
        <iron-ajax id="xhr_list_by_category" url="{{app.httpHost}}/plugin/api/product.query.by.category?app_id={{app.appId}}&cat_id={{selectedCategoryId}}&max={{max}}&start={{start}}" last-response="{{products}}" on-last-response-changed="_loadSuccess"></iron-ajax>
        <plugin-content-view visible="{{visible}}" contents="{{layout.product_list_top}}" width="[[pageWidth]]"></plugin-content-view>
        <div class="search"><paper-input label="请输入搜索关键词" value="{{keyword}}" no-label-float on-input="_keywordChanged"></paper-input></div>
        <div id="main">
            <div id="nav">
                <paper-listbox selected="{{selectedCategoryId}}" on-selected-changed="_catChanged" attr-for-selected="cid">
                    <paper-item cid="all">全部</paper-item>
                    <template is="dom-repeat" items="{{categories.result}}" as="category">
                        <paper-item cid="{{category.id}}">
                            <template is="dom-if" if="{{category.pic}}">
                            <iron-image preload fade src="{{category.pic}}?imageView2/1/w/70/h/50"></iron-image>
                            </template>
                            {{category.name}}
                        </paper-item>
                    </template>
                </paper-listbox>
            </div>
            <div id="list">
                <paper-listbox>
                    <template is="dom-repeat" items="{{lasyItems}}" as="product">
                        <a href="{{rootPath}}product-detail/{{product.id}}">
                        <paper-icon-item>
                            <iron-image preload fade sizing="contain" src="{{product.album.0}}?imageView2/1/w/80/h/80" slot="item-icon"></iron-image>
                            <paper-item-body two-line>
                                <div>{{product.name}}</div>
                                <div secondary>价格：{{_price(product)}}</div>
                            </paper-item-body>
                            <iron-icon icon="arrow-right"></iron-icon>
                        </paper-icon-item>
                        </a>
                    </template>
                </paper-listbox>
            </div>
        </div>
        <plugin-content-view visible="{{visible}}" contents="{{layout.product_list_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>
    <script>
        class ShopProduct extends PluginElement {
            static get observers() {
                return [
                    '_query(routeData.*)'
                ]
            }
            static get is() {
                return 'shop-product';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    start:{
                        type:Number,
                        value:0
                    },
                    max:{
                        type:Number,
                        value:10
                    },
                    lasyItems:{
                        type:Array,
                        value:[]
                    },
                    scrollEvent:Object,
                    selectedCategoryId:{
                        type:String,
                        value:"all"
                    },
                    keyword:String,
                    timeout:Object
                }
                
            }
            ready(){
                super.ready();
                this.$.xhr_categories.generateRequest();
                
                let startTop = 0;
                window.addEventListener("scroll",e=>{
                    if(startTop==0){
                        startTop = this.$.main.offsetTop;
                    }
                    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                    if(scrollTop>=startTop){
                        if(this.$.nav.style.position!="fixed"){
                            this.$.nav.style.top = "0px";
                            this.$.nav.style.position = "fixed";
                        }
                    }else{
                        this.$.nav.style.top = startTop+"px";
                        this.$.nav.style.position = "absolute";
                    }
                });
                this.pageWidth = this.offsetWidth;
            }
            _visibleChanged(visible) {
                if(visible){
                    
                    this.scrollEvent = ()=>{this._load();};
                    window.addEventListener("scrollEnded",this.scrollEvent);
                }else{
                    window.removeEventListener("scrollEnded",this.scrollEvent);
                }
            }
            _catChanged(e){
                this._page(this.rootPath+"product/"+e.detail.value);
            }
            _keywordChanged(e){
                if(this.timeout){
                    window.clearTimeout(this.timeout);
                }
                this.timeout = setTimeout(()=>{this._query()},1000);
            }
            _query(){
                if(app.route.path.startsWith(this.rootPath+"product")){
                    if(app.route.path==this.rootPath+"product"){
                        this._page(this.rootPath+"product/all");
                    }else{
                        this.selectedCategoryId=this.routeData.catid;
                        this.lasyItems = [];
                        this.start = 0;
                        this._load();
                    }
                }
            }
            _load(){
                let query = null;
                if(this.selectedCategoryId&&this.selectedCategoryId!="all"){
                    query = this.$.xhr_list_by_category;
                }else{
                    query = this.$.xhr_list;
                }
                query.params.keyword = "%"+(this.keyword?this.keyword:"")+"%";
                query.generateRequest();
            }
            _loadSuccess(e){
                let result = e.detail.value.result;
                result.forEach(item=>{
                    this.push("lasyItems",item);
                });
                this.loading = false;
                this.start += this.max;
            }
        }
        customElements.define(ShopProduct.is, ShopProduct);
    </script>
</dom-module>
